<template> 
    <div>
        <div id="box" class="box">
            <div class="box-one">
                <h2>{{ msg }}<br>__________________</h2>
                <div class="box-one-content">
                    <img src="~@/assets/img2/光遇.jpg" width="300px" height="250px">
                    <span>{{ msg2 }}</span>
                </div>
               
                
              
            </div>
            <div id="two" class="box-two">
                <h2>{{ msg3 }}<br>__________________</h2>
                <div class="box-one-content">
                    <img src="~@/assets/img2/光遇1.jpg" width="300px" height="250px">
                    <ul>
                        <li v-for="(item,index) in list" :key="index">{{item.title}}</li>
                    </ul>
    
                    
                </div>
            </div>
            
        </div>
    </div>
    
    
    
    </template>
    
    <script setup>
    import { ref } from 'vue'
    //使用ref函数定义单文本数据，并返回一个响应式的变量
    const msg = ref('光遇简介')
    const msg2 = ref('《光·遇》是由游戏制作人陈星汉及其团队Thatgamecompany开发的社交冒险游戏,国内由网易游戏代理运营.该作于2019年6月21日在App Store发行,2020年7月9日在安卓平台正式上线.2021年6月登陆Switch在游戏中,玩家将化身"光之后裔"，承载着先祖的意志，与好友携手，在天空王国的奇妙大陆上，展开一场充满奇遇的冒险')
    const msg3 = ref('光遇攻略')
    const list = ref([{title:'晨岛'},
                    {title:'云野'}, 
                    {title:'雨林'},
                    {title:'雨林'},
                    {title:'暮土'},
                    {title:'禁阁'}])

     </script> 
    
    <style scoped>
    h2{
        font-family: "华文琥珀";
        font-size: 40px;
        color: #FF6600;
        font-weight: normal;
    }
    
    .box{
        width: 100%;
        height: 400px;
        display: flex;/*设置父元素为flex布局*/
        flex-wrap: wrap;
        justify-content: space-between;
    
    }
    .box-one{
        width: 50%;
        height: 400px;
    }
    .box-two{
        width: 50%;
        height: 400px;
    }
    .a{
        margin-top: 100px;
        font-size: 20px;
        color: #FF6600;
        font-family: "微软雅黑";
        font-weight: bold;
    }
    .box-one-content{
        width: 100%;
        height: 400px;
        display: flex;/*设置父元素为flex布局*/
        flex-wrap: wrap;
        
    }
    
    span{
            font-size: 20px;
            font-family: 隶书;
            color: #333;
            margin-top: 10px;
            
            float: right;
    
            width: 400px;
            height: 140px;
        }
    li{
        font-size: 25px;
            font-family: 隶书;
            color: #333;
            margin-top: 10px;
        }
    
    </style>